<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="/StudentInfo/utils/image/favicon.ico" type="image/x-icon"/>
    <meta charset="UTF-8">
    <title>学生信息管理系统</title>
    <script type="text/javascript" src="/StudentInfo/utils/js/jquery-3.3.1.min.js"></script>
    <!-- Loading Bootstrap -->
    <link href="/StudentInfo/utils/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!-- Loading Flat UI Pro -->
    <link href="/StudentInfo/utils/css/flat-ui.css" rel="stylesheet">
    <!-- Loading Flat UI JS -->
    <script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $("#sid").change(
                    function () {
                        $.post("/StudentInfo/AjaxHandler/existSid?sid="
                            + $("#sid").val(), function (data, status) {
                            $("#countsid").html(data);
                        })

                    })

            })

    </script>
    <script type='text/javascript' src='/StudentInfo/utils/scripts/particles.js'></script>
    <link href="/StudentInfo/utils/css/animate.css" rel="stylesheet">
</head>

<body>
<div id="particles-js">
    <canvas class="particles-js-canvas-el" width="1322" height="774" style="width: 100%; height: 100%;"></canvas>
</div>
<jsp:include page="adminLeft.jsp"/>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h5>添加学生</h5>
            <form action="/StudentInfo/AdminHandler/addStudent" method="post" name="form1">
                <div class="row">
                    <div class="col-md-6">
                        <h6>学号</h6>
                        <input type="text" name="sid" id="sid" class="form-control"
                               oninput="value=value.replace(/[^\d]/g,'')" maxlength="12"></input>
                        <span id="countsid" style="color: #ff0000;"></span>
                        <h6>姓名</h6>
                        <input type="text" name="sname" class="form-control"
                               onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')" maxlength="4"></input>
                        <h6>身份证号</h6>
                        <input type="text" name="sidcard" class="form-control"
                               oninput="value=value.replace(/[^\d]/g,'')" maxlength="18"></input>
                        <h6>性别</h6>

                        <label class="radio" for="radio1"> <input type="radio"
                                                                  name="ssex" value="男" id="radio1" data-toggle="radio"
                                                                  class="custom-radio"> <span class="icons"> <span
                                class="icon-unchecked"></span> <span class="icon-checked"></span>
							</span> <font style="vertical-align: inherit;"> <font
                                style="vertical-align: inherit;"> 男 </font>
                        </font>
                        </label> <label class="radio" for="radio2"> <input type="radio"
                                                                           name="ssex" value="女" id="radio2"
                                                                           data-toggle="radio"
                                                                           class="custom-radio"> <span
                            class="icons"> <span
                            class="icon-unchecked"></span> <span class="icon-checked"></span>
							</span> <font style="vertical-align: inherit;"> <font
                            style="vertical-align: inherit;"> 女 </font>
                    </font>
                    </label>

                        <h6>密&nbsp;&nbsp;码</h6>
                        <input type="password" name="spassword" class="form-control"
                               onkeyup="this.value=this.value.replace(/(^\s+)|(\s+$)/g,'');" maxlength="16"/>
                    </div>
                    <div class="col-md-6">
                        <h6>年龄</h6>
                        <input type="text" name="sage" class="form-control" maxlength="2"></input>


                        <h6>专业</h6>
                        <select name="profession"
                                class="form-control select select-primary select-block mbl" id="belongcoll">
                            <option value="">-请选择学院-</option>
                        </select>

                        <h6>学院</h6>
                        <select name="college"
                                class="form-control select select-primary select-block mbl" id="belongpro">
                            <option value="">-请选择专业-</option>
                        </select>

                        <h6>班级</h6>
                        <select name="classr"
                                class="form-control select select-primary select-block mbl" id="belongcla">
                            <option value="">-请选择班级-</option>
                        </select>

                    </div>
                    <div class="col-md-12">
                        <br> <input type="submit"
                                    class="btn btn-primary btn-wide login-btn" value="添加"/>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script type="text/javascript" src="/StudentInfo/utils/scripts/flat-ui.js"></script>
<script src="/StudentInfo/utils/scripts/bganimation.js"></script>


<script type="text/javascript">

    $("form").submit(function () {
        //当表单提交的时候，对字段验证，并根据需要放出提示
        if ($.trim($("#belongcoll").val()) == "") {
            alert("学院不能为空");
            return false;//终止表单提交

        } else if ($.trim($("#belongpro").val()) == "") {
            alert("专业不能为空");
            return false;//终止表单提交

        } else if ($.trim($("#belongcla").val()) == "") {
            alert("班级不能为空");
            return false;//终止表单提交

        }
    });


    var arr_belongcoll = ["数学与计算机科学学院", "物理与智能制造学院", "经济与管理学院", "法学与商务学院"];
    var arr_belongpro = [
        ["移动云计算", "信息与计算科学（智能移动开发）", "服务外包", "数据科学与大数据技术"],
        ["应用物理学(集成电路方向)", "物联网工程", "电子信息工程", "物理学"],
        ["会计学", "会计学（中外合作办学）", "会计学（金融服务与理财方向）", "会计学（国际班）"],
        ["法学专业", "思想政治教育专业", "旅游管理专业", "电子商务专业"]
    ];
    var arr_belongcla = [
        [
            ["移动云计算一班", "移动云计算二班"],
            ["智能移动开发一班", "智能移动开发二班"],
            ["服务外包一班", "服务外包二班"],
            ["大数据一班", "大数据二班"]

        ],
        [
            ["应用物理学一班", "应用物理学二班"],
            ["物联网工程一班", "物联网工程二班"],
            ["电子信息工程一班", "电子信息工程二班"],
            ["物理学一班", "物理学二班"]

        ],
        [
            ["会计学一班", "会计学二班"],
            ["会计学（中外合作办学）一班", "会计学（中外合作办学）二班"],
            ["会计学（金融服务与理财方向）一班", "会计学（金融服务与理财方向）二班"],
            ["会计学（国际班）一班", "会计学（国际班）二班"]

        ],
        [
            ["法学一班", "法学二班"],
            ["思想政治教育专业一班", "思想政治教育专业二班"],
            ["旅游管理专业一班", "旅游管理专业二班"],
            ["电子商务专业一班", "电子商务专业二班"]

        ]
    ];

    var ocoll = document.getElementById("belongcoll");
    var opro = document.getElementById("belongpro");
    var ocla = document.getElementById("belongcla");


    var quanju_arr;//创建一个全局对象，用于存储一个中间数组

    function input_arr(arr, event) {//封装一个函数，用于向下拉栏中添加元素
        for (var i = 0; i < arr.length; i++) {//下拉栏内的元素来源于数组中的元素，遍历数组
            var option = new Option(arr[i], i);//创建Option对象（这个O要大写），存入值
            event.appendChild(option);//把option添加到event对象的末尾
        }
    }

    input_arr(arr_belongcoll, ocoll);//调用,给一级下拉栏添元素

    ocoll.onchange = function () {//给下拉栏绑定事件（当下拉栏元素改变时执行）
        opro.options.length = 1;//当一级下拉栏改变时，清空二级的下拉栏内元素
        ocla.options.length = 1;//当一级下拉栏改变时，清空三级的下拉栏内元素
        var index = this.value;//每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
        var arr_pro_next = arr_belongpro[index];//获取当前选择一级的二级元素并赋给一个数组
        quanju_arr = arr_belongcla[index];//获取当前选择一级中二级的三级元素并赋给定义的中间数组
        input_arr(arr_pro_next, opro);//调用,给二级下拉栏添元素
    }

    opro.onchange = function () {
        ocla.options.length = 1;
        var index = this.value;
        var arr_cla_next = quanju_arr[index];
        input_arr(arr_cla_next, ocla);//调用,给三级下拉栏添元素
    }


</script>
<script>
    $("select").select2({
        dropdownCssClass: 'dropdown-inverse'
    });
</script>
</body>
</html>